<script setup>
import {reactive, onMounted, toRefs, ref} from 'vue';

import {useUserStore} from '@/stores/getUserStore';
import {addOrder} from "@/apis/order.js";

const {user, fetchUser} = useUserStore();

//通过sessionStorage获取当前用户 parameter username

onMounted(() => {
  const authDataStr = sessionStorage.getItem('Authentication');
  if (authDataStr) {
    const authData = JSON.parse(authDataStr);
    const username = authData.username;
    fetchUser(username);

  }

});

/*
* 内部表单操作
* */
const props = defineProps({
  item: {
    type: Object,
    default: () => {
    }
  },

})

// 解构 item 属性
const {item} = toRefs(props);
console.log("item" + item.value.id)
console.log("user" + user.username)
// 自定义尺寸
const size = reactive([37, 38, 39, 40, 41, 42, 43, 44])


const onCancel = () => {
  // 清空表单或执行其他取消操作
  Object.keys(ruleForm).forEach(key => {
    if (typeof ruleForm[key] === 'string' || typeof ruleForm[key] === 'boolean') {
      ruleForm[key] = ''
    } else if (Array.isArray(ruleForm[key])) {
      ruleForm[key] = []
    }
  });
}


/*
* el-dialog表单校验规则
* */
const ruleFormRef = ref(null);
const displayForm = ref(
    {
      username: user.username,
      itemName: item.value.itemName,
      size: '',   //尺码

    }
)
// 表单数据
const ruleForm = ref({
  itemId: item.value.id,
  customerId: user.id,
  email: user.email,
  phone: user.phone,

  type: item.value.type,


  paymentType: '' //收款方式
})
// 定义规则
const rules = ref({
  email: [
    {required: true, message: '请输入邮箱地址', trigger: 'blur'},
    {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号码',
      trigger: 'blur'
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '手机号码格式不正确',
      trigger: 'blur'
    }
  ],
  size: [
    {required: true, message: '请选择尺码', trigger: 'blur'}
  ],
  paymentType: [

    {required: true, message: '请选择收款方式', trigger: 'blur'}
  ]


})

// 确定按钮点击事件
const submitForm = (formRef) => {
  // 表单校验
  formRef.validate((valid) => {
    if (valid) {
      addOrder(ruleForm.value).then(res => {
        alert("添加订单成功")
      })
      // 表单提交
      // 关闭弹窗
      dialogFormVisible.value = false;
    } else {

      alert("添加订单失败");
      return false;
    }
  })
}
// 表单标签大小
const formLabelWidth = '140px'
// 表单显示
const dialogFormVisible = ref(true)
</script>

<template>

  <el-dialog v-model="dialogFormVisible" title="填写回收信息">
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px">
      <!--      用户名-->
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="displayForm.username" autocomplete="off" disabled/>
      </el-form-item>
      <!--      brand-->
      <el-form-item label="球鞋品牌" :label-width="formLabelWidth">
        <el-input v-model="displayForm.itemName" autocomplete="off" disabled/>
      </el-form-item>
      <!--      型号-->
      <el-form-item label="型号" :label-width="formLabelWidth">
        <el-input v-model="ruleForm.type" autocomplete="off" disabled/>
      </el-form-item>
      <!--      尺寸-->
      <el-form-item label="尺寸" :label-width="formLabelWidth" prop="">
        <el-select v-model="displayForm.size" placeholder="请选择尺码">
          <el-option v-for="number in size" :label="number" :value="number"/>
        </el-select>
      </el-form-item>
      <!--      邮箱-->
      <el-form-item label="联系邮箱" :label-width="formLabelWidth" prop="email">
        <el-input v-model="ruleForm.email" autocomplete="off"/>
      </el-form-item>
      <!--      联系电话-->
      <el-form-item label="联系电话" :label-width="formLabelWidth" prop="phone">
        <el-input v-model="ruleForm.phone" autocomplete="off"/>
      </el-form-item>
      <!--      支付方式-->
      <el-form-item label="收款方式" :label-width="formLabelWidth" prop="paymentType">
        <el-select v-model="ruleForm.paymentType" placeholder="请选择收款方式">
          <el-option label="微信" value="0"/>
          <el-option label="支付宝" value="1"/>
          <el-option label="银联" value="2"/>
        </el-select>
      </el-form-item>
    </el-form>
    <!--    确认或取消-->
    <template #footer>
      <div class="dialog-footer">
        <el-button>Cancel</el-button>
        <el-button type="primary" @click="()=>{
          dialogFormVisible = false;
          submitForm(ruleFormRef);
        }">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped lang="scss">
.el-dialog {
  text-align: center;
  width: 500px;
  margin-left: 50%;
}

</style>